<template>
  <div class="loginAndRegister">
    <my-header1 :header-obj="header1Obj" class="login-header" />

    <section>
      <ol>
        <li v-for="(item,index) in loginList" :key="index" :class="num===index?'active':''" @click="tabChose(index)">{{ item }}</li>
      </ol>
      <div class="tab-switch">
        <div v-show="num===0" class="loginBox">
          <div class="input-box phone-box">
            <i class="font_family icon-denglu_icon_num" />
            <input v-model="phone" type="phone" :placeholder="zhanghao?'请输入手机号':'账号不存在'" :class="zhanghao?'':'red-meg'">
          </div>
          <div class="input-box mima-box">
            <i class="font_family icon-denglu_icon_mima" />
            <input v-model="mima" type="password" :placeholder="mimaBool?'请输入密码':'密码错误'" :class="mimaBool?'':'red-meg'">
          </div>
          <p class="wangjimima" @click="wjmm">忘记密码？</p>
          <button v-show="!canClick" class="denglu">登录</button>
          <button v-show="canClick" class="denglu openClick" @click="login">登录</button>
        </div>
        <div v-show="num===1" class="registerBox">
          <div class="input-box phone-box">
            <i class="font_family icon-denglu_icon_num" />
            <input v-model="phone" type="phone" :placeholder="phoneNumb?'请输入手机号':'手机号不存在'" length="11" :class="phoneNumb?'':'red-meg'">
          </div>
          <div class="input-box phone-box">
            <i class="font_family icon-denglu_icon_mima" />
            <input v-model="mima" type="phone" :placeholder="mimaBool2?'请输入密码':'密码为字母与数字的六位数组合'" max="8" :class="mimaBool2?'':'red-meg'">
          </div>
          <div class="input-box mima-box">
            <i class="font_family icon-denglu_icon_yanzheng" />
            <input v-model="yanzhengma" type="password" :placeholder="mimaBool3?'请输入验证码':''" max="6" :class="mimaBool3?'':'red-meg'">
            <span>获取验证码</span>
          </div>
          <div class="xieyi" @click="iAgree">
            <i :class="agreeBool?'iSelect':''" />
            <span>我已同意并接受<a @click.stop="xieyi">《用户协议》</a>&nbsp;<a @click.stop="yinsi">《隐私政策》</a></span>
          </div>
          <button class="denglu zhuce" @click="register">立即注册</button>
        </div>
      </div>

    </section>
  </div>
</template>

<script>
import myHeader1 from '../../../components/template-item2/header/index'
export default {
  components: { myHeader1 },
  data() {
    return {
      loginList: ['登录', '注册'],
      num: 0,
      header1Obj: {
        logoImg: require('../../../assets/img/template-item2/common/logo1.png'),
        style: {
          backgroundColor: '#323333',
          color: '#fff'
        }
      },
      input3: '',
      input4: '',
      phone: '',
      mima: '',
      yanzhengma: '',
      agreeBool: false,
      /* 校验提示 */
      zhanghao: true,
      mimaBool: false,
      phoneNumb: true,
      mimaBool2: true,
      mimaBool3: true,
      /* 是否可点击了 */
      canClick: true
    }
  },
  created() {
    if (this.$route.query.isLogin) {
      this.activeName = this.$route.query.isLogin
    }
  },
  methods: {
    login() {
      this.$store.commit('template1/changeLogin', true)
      this.$router.push('/vMain')
    },
    register() {
      this.$store.commit('template1/changeLogin', true)
      this.$router.push('/vMain')
    },
    wjmm() {
      this.$router.push('/fgetPassword')
    },
    iAgree() {
      this.agreeBool = !this.agreeBool
    },
    tabChose(num) {
      this.num = num
    },
    xieyi() {
      // this.$router.push()
    },
    yinsi() {

    }
  }

}
</script>
<style lang="scss" scoped>
.loginAndRegister{
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  overflow-x: hidden;
  background-color: #fff;
  background-size: cover;
  padding-bottom: 50px;
  >.login-header{
    margin-bottom: 158px;
  }
  >section{
    width: 500px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow:0px 2px 10px rgba(0,0,0,0.16);
    border-radius: 8px;
    >ol{
      width: 100%;
      display: flex;
      align-items: center;
      >li{
        width: 50%;
        height: 60px;
        line-height: 60px;
        background-color: #F8F8F8;
        text-align: center;
        cursor: pointer;
        color: #787878;
        font-size: 18px;
        cursor: pointer;
      }
      >li:first-child{
        border-top-left-radius: 8px;
      }
      >li:last-child{
        border-top-right-radius: 8px;
      }
      >.active{
        background-color: #DC3535;
        color: #fff;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .tab-switch{
      width: 100%;
      padding: 0 37px;
      color: #999;
      /* 登录注册公共部分 */
      .input-box{
        width: 100%;
        height: 48px;
        border: 1px solid #ECECEC;
        line-height: 48px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
        margin-bottom: 12px;
        >input{
          border: none;
          outline: none;
          background-color: transparent;
          height: 20px;
          line-height: 20px;
          padding: 0;
          width: 100%;
        }
        >input::-webkit-input-placeholder{
          /* 修改placeholder颜色  */
          color: #707070;
          font-size: 14px;
        }
        >.red-meg::-webkit-input-placeholder{
          color: #DC3535;
        }
        >i{
          font-size: 16px;
          margin-left: 14px;
          margin-right: 15px;
        }
      }

      .denglu{
        border: none;
        outline: none;
        width: 100%;
        height: 44px;
        background-color: #ECECEC;
        border-radius: 4px;
        color: #787878;
        cursor: pointer;
        font-size: 16px;
        margin-bottom: 21px;
      }
      .zhuce{
        margin-bottom: 30px;
      }
      /* 登录 */
      .loginBox{
        padding-top: 46px;
        >p:last-child{
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #417AEF;
        }
        >.wangjimima{
          width: 100%;
          text-align: right;
          margin-bottom: 25px;
          color: #707070;
          cursor: pointer;
        }
        >.mima-box{
          margin-bottom: 15px;
        }
        >.openClick{
          background-color: #DC3535;
          color: #fff;
        }
      }

      /* 注册 */
      .registerBox{
        padding-top: 46px;
        >p:last-child{
          width: 100%;
          text-align: center;
          font-size: 16px;
          >a{
            color: #417AEF;
          }
        }
        >.mima-box{
          position: relative;
          margin-bottom: 20px;
          >span{
            display: block;
            height: 32px;
            line-height: 32px;
            position: absolute;
            top: 10px;
            right: 6px;
            padding: 0 7px;
            color: #fff;
            background-color: #DC3535;
            border-radius:4px;
            cursor: pointer;
            font-size: 14px;
          }
        }
        .xieyi{
          margin-bottom: 40px;
          padding-left: 3px;
          color: #999;
          cursor: pointer;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          >i{
            display: block;
            width: 13px;
            height: 13px;
            cursor: pointer;
            background: #ECECEC;
          }
          /* 手写checbox多选框 */
          >.iSelect::before{
            display: block;
            content: "\2713";
            background-color: #DC3535;
            text-align: center;
            font-size: 12px;
            color: #fff;
          }
          >span{
            vertical-align: middle;
            font-size: 14px;
            margin-left: 8px;
            >a{
              color: #417AEF;
            }
          }
        }
      }
    }
  }

}

</style>

